/* dd-btn 按钮样式 注意：root 在小程序里还用不了 */

:root {
    --btn-padding: 5px 15px;
    --btn-fontsize: 12px;
    --btn-fontweight: 400;
    --box-shadow: 0 0 5px #ccc;
}

.dd-btn {
    outline: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: var(--btn-fontsize);
    padding: var(--btn-padding);
    text-align: center;
    box-shadow: var(--box-shadow);
    /* min-width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; */
}
.dd-btn:hover {
    background-color: #ddd;
}

.dd-btn-c {
    outline: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: var(--btn-fontsize);
    padding: var(--btn-padding);
    text-align: center;
    box-shadow: var(--box-shadow);
    border-radius: 15px;
}
.dd-btn-c:hover {
    background-color: #ddd;
}

.dd-btn-ccc {
    color: #000;
    background-color: #ccc;
    font-weight: var(--btn-fontweight);
}
.dd-btn-ccc:hover {
    background-color: rgb(226, 220, 220);
}

.dd-btn-blue {
    color: #fff;
    background-color: rgb(76, 93, 240);
    font-weight: var(--btn-fontweight);
}

.dd-btn-blue:hover {
    background-color: rgb(34, 42, 131);
}

.dd-btn-green {
    color: #fff;
    background: #93da95;
    font-weight: var(--btn-fontweight);
}

.dd-btn-green:hover {
    background: #579759;
}

.dd-btn-yellow {
    color: #000000;
    background-color: rgb(228, 228, 44);
}

.dd-btn-yellow:hover {
    background-color: #c2d363;
}

.dd-btn-red {
    color: white;
    background-color: #c82333;
    font-weight: var(--btn-fontweight);
}

.dd-btn-red:hover {
    background-color: #80222b;
}